<template>
	<u-popup ref="refPopupRule" :round="10" :show="value" type="center" @close="handleClose" mode="center"
		class="popupRulebox">
		<view class="rule_box">
			<text class="rule_title">会员卡</text>
			<scroller class="list_box_content_wrapper">
				<view class="list_box_content">

					<u-radio-group v-model="cardValue" placement="column" @change="groupChange">

						<u-radio v-for="(item,index) in data" :customStyle="{marginBottom: '8px'}" :key="index"
							:disabled="item.cardNo==='0'?true:false" :label="`${item.label}  ${item.balanceAmount}`"
							:name="item.cardNo" @change="radioChange">

							<view @click="handleClick(item)" :class="index!==0?'top-one':''" class="list-content">
								<image v-if="item.label==='汽油卡'" class="img-bg" src="/static/offlineOrder/qi.png">
								</image>
								<image v-else-if="item.label==='汽油卡'" class="img-bg" src="/static/offlineOrder/qi.png">
								</image>
								<image v-else-if="item.label==='柴油卡'" class="img-bg" src="/static/offlineOrder/cy.png">
								</image>
								<image v-else class="img-bg" src="/static/offlineOrder/ty.png"></image>
								<view class="card-message">
									<text class="card-name">{{item.cardNo}}</text>
									<text class="card-balance">{{item.label}}余额：{{item.balanceAmount}}</text>
								</view>

							</view>
						</u-radio>
					</u-radio-group>

				</view>
			</scroller>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: "wehcatAndAlipay",
		props: {
			value: {
				default: () => {
					return false
				}
			},
			data: {
				default: () => {
					return []
				}
			},
			cardNo: {
				default: () => {
					return ""
				}
			}
		},


		computed: {


		},
		watch:{
			cardNo(val){
				this.cardValue = this.cardNo
			}
		},
		
		mounted() {
			console.log(this.data)
			
		},
		data() {
			return {
				cardValue: ""
			};
		},
		methods: {
			handleClick(arg) {
				this.cardValue = arg.cardNo
				this.$emit('handleClick', arg)
			},
			handleClose() {
				this.$emit('input', false)
			}
		}
	}
</script>

<style>
	.popupRulebox {
		padding: 0 0.0upx;
	}

	.rule_box {
		background-color: #FFFFFF;
		border-radius: 20.0upx;
		padding: 30.0upx;
		margin: 0 10upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}


	.rule_footer_btn_modal {
		padding: 20.0upx 200.0upx;
		text-align: center;
		border-radius: 40.0upx;
		background-image: linear-gradient(to bottom, #5b95ff, #5b95ff);
		color: #FFFFFF;
		font-size: 32.0upx;
	}





	.coupon {
		width: 38.0upx;
		height: 38.0upx;
	}


	.choosed {


		background: #DFEBFF;
		box-shadow: 0px 4.0upx 4.0upx 0px rgba(2, 38, 102, 0.15);
		border-radius: 8.0upx;
		opacity: 1;
		border: 1px solid #4F8CF7;
	}


	.rule_footer_btn {
		width: 700.0upx;
		height: 96.0upx;
		background: linear-gradient(to right, #4F92F7, #446BF2);
		border-radius: 12.0upx;
		color: #ffffff;
		text-align: center;
		line-height: 96.0upx;
		opacity: 1;
		font-size: 32.0upx;
	}

	.list_box_content_wrapper {
		height: 700.0upx;
		width: 550.0upx;
		flex: 1;
		overflow-y: scroll;
	}

	.list_box_content {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		padding: 26.0px 0.0px;
		/* justify-content: space-around; */
	}

	.list-content {
		flex-direction: row;
		align-items: center;
		justify-content: center;

	}

	.list-content:not(:nth-child(1)) {
		margin-top: 30.0px;
	}

	.img-bg {
		width: 126.0upx;
		height: 126.0upx;
	}

	.card-name {
		color: rgba(51, 51, 51, 1);
		font-size: 16.0px;
	}

	.card-balance {
		color: rgba(51, 51, 51, 1);
		font-size: 16.0px;
		margin-top: 5.0px;
	}

	.card-message {
		margin-left: 5.0px;
	}

	.top-one {
		margin-top: 10.0px;

	}
</style>